<template>
	<div class="detail">
		<div class="top">
			<div class="title">{{arr1[0].title}}</div>
             <div class="time">发布时间：{{arr1[0].updatetime}} 编辑：{{arr1[0].uid}}</div>
			 <div class="right">新闻详情</div>
			 <img :src="arr1[0].preview" alt="">
		     <pre>{{arr1[0].text}}</pre>
<hr>
<router-link to='./'>
	<el-button type="info">返回列表</el-button>
</router-link>
		</div>
	</div>
</template>

<script setup>
	import {
		reactive,
		ref,
		onBeforeMount,
		 onMounted,
		getCurrentInstance,
	} from 'vue';
	//接收传参
		import {useRoute} from "vue-router" //引入
		let route=useRoute()
		 console.log(route.query)//如果是params传参就用route.params接收
	
	
	//后端数据	 
	let arr1=reactive([]) //和vue2一样，请求数据时需要提前用一个空数组装
		 
	const {proxy} = getCurrentInstance(); //正常使用:语法糖环境默认为setup钩子
		 onBeforeMount( async()=>{
			 if(arr1==false){
		 	 let res=await proxy.$axios('newsdetail',{params:{id:route.query.id}})  //使用公共配置的$axios进行axios请求
		 	//因为公共路径的配置所以多了一个api1，实际请求的网址为http://127.0.0.1:5137/api1/test
		 	//此时会进行代理 转变为http://127.0.0.1:7001/test
		 	 arr1.push(...res.data) //将请求的数据添加到外部的arr1中
		 		 // console.log(arr1,6666)	
		 		 //添加图片绝对路径
		 		 arr1.forEach((el,index)=>{		
		 		 				 
		 		 		el.preview='http://localhost:7001'+el.preview
		 		 
		 		 })
				 }
		 })
</script>

<style lang="scss" scoped>
	.detail{
		width: 1000px;
		// height: 800px;
		margin: 0 auto;
		margin-top: -10px;
		// z-index: 9999;
		background-color: #fbfdff;
		border: 1px solid darkgray;
		cursor: default;
		
		.top{
			// height: 80px;
			// background-color: antiquewhite;
			position: relative;
			text-align: center;
			padding-top: 20px;
			// line-height: 20px;
			.title{
				font-size: 30px;
			}
			.time{
				position: absolute;
				top: 80px;
			    left:20px;
				font-size: 12px;
				color: #939495;
			}
			.right{
				width: 114px;
				height: 41px;
				// background-color: #939495;
				background-image: url('../img/news/newsdetail.png');
				position: absolute;
				top: 0;			
				left:887px;	
				text-align: center;
				line-height: 41px;
				color: white;
				}
			img{
				width: 900px;
				height:500px;
				margin-top: 50px;
			}

			pre{  
				 white-space: pre-wrap;
				margin: 0 auto;
				width: 900px;
				text-align: left;
				font-size: 13px;
				line-height: 30px;

			}
			hr{
				width:900px;
				margin: 0 auto;
				margin-top: 20px;
			}
			.el-button{
				width: 200px;
				height: 50px;
				margin: 10px auto;
			}
		}
	}
</style>